<template>
	<view class="myView">
	    <view class="my_header">
	      <text>我的</text>
	      <image src="../../static/ic_analyse_default.png" />
	      <button @click="toLogin">点击登录</button>
	    </view>
	
	    <view class="my_list">
	      <li @click="toToast">
	        <image src="../../static/ic_my_photo.png" />
	        <text>我的照片</text>
	        <image src="../../static/ic_arrow_right_normal.png" />
	      </li>
	      <li @click="toToast">
	        <image src="../../static/ic_my_collect.png" />
	        <text>我的收藏</text>
	        <image src="../../static/ic_arrow_right_normal.png" />
	      </li>
	      <li @click="toToast">
	        <image src="../../static/ic_my_upload.png" />
	        <text>上传的食物</text>
	        <image src="../../static/ic_arrow_right_normal.png" />
	      </li>
	    </view>
	  </view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		 methods: {
			 //弹出提示框
		    toToast: function () {
				uni.showToast({
					title:'请先登录',
					icon:'none'
				})
		    },
		    toLogin:function(){
		     uni.navigateTo({
		     	url:'../../subpkg/Login/Login'
		     })
		    }
		  },
	}
</script>

<style lang="scss" scoped>
.myView {
  .my_header {
    position: relative;
    height: 500rpx;
    background: url(../../static/img_my_bg.png);
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text {
      &:nth-of-type(1) {
        color: white;
		font-size: 40rpx;
        margin: 15px 0;
      }
    }
    button{
      background: white;
      width: 30%;
      border: none;
      border-radius: 50px;
      font-size: 14px;
      color: #f0903d;
      margin-top: 15px;
    }
    image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 2px solid white;
    }
    &::after {
      position: absolute;
      content: "";
      right: 10px;
      top: 10px;
      width: 30px;
      height: 30px;
      background: url(../../static/ic_my_setting.png);
      background-size: 100% 100%;
    }
  }
  .my_list {
    background: white;
    list-style: none;
    padding: 0 15px;
    li {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      &:nth-of-type(2) {
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
      }
      &:nth-of-type(3) {
        &::after {
          position: absolute;
          content: "上传";
          border-radius: 50px;
          padding: 3px 12px;
          color: #f0903d;
          border: 1px solid #f0903d;
          font-size: 14px;
          right: 20px;
          top: 18px;
        }
      }
      text {
        flex: 1;
        text-align: left;
        margin-left: 15px;
        font-size: 14px;
      }
      image {
        &:nth-of-type(1) {
          width: 25px;
          height: 25px;
        }
        &:nth-of-type(2) {
          width: 10px;
          height: 15px;
        }
      }
    }
  }
}
</style>
